<template>
  <!--  传感器信息管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.code" style="width: 300px" clearable placeholder="请输入传感器编号">
        <template slot="prepend">传感器编号</template>
      </el-input>
      <el-input v-model="form.batch" style="width: 300px" clearable placeholder="请输入传感器批次号">
        <template slot="prepend">批次号</template>
      </el-input>
      <el-select v-model="form.type" clearable placeholder="请选择传感器类型">
        <el-option v-for="item in EnumSensorTypeList" :key="item.code" :label="item.name" :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.bindStatus" style="width: 140px" filterable clearable placeholder="使用状态">
        <el-option
          v-for="item in bindStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">传感器新增</el-button>
      <el-button icon="el-icon-plus" @click.stop="handleAddGnss" class="common_btn-small">GNSS新增</el-button>
      <!-- table -->
      <div class="common_btnBox" >
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="code" sortable show-overflow-tooltip label="编号" min-width="165"></el-table-column>
        <el-table-column prop="batch" sortable show-overflow-tooltip label="批次" width="100"></el-table-column>
        <el-table-column prop="sn" sortable label="采集仪SN" min-width="165"></el-table-column>
        <el-table-column prop="typeName" sortable label="类型" min-width="140"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
        <el-table-column prop="createTime" sortable label="入库时间" width="180">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="120">
          <template slot-scope="scope">
            <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除该传感器信息吗？"
                           @confirm="handleDelete(scope.row)">
              <el-button type="text" slot="reference" class="btn_delete" style="margin-right: 10px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false" width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="110px">
        <el-form-item label="传感器类型" prop="type">
          <el-select v-model.trim="currentRow.type" placeholder="请选择">
            <el-option v-for="item in EnumSensorTypeList" :key="item.code" :label="item.name"
                       :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model="currentRow.count" placeholder="请输入数量，输入5将一次性录入5条数据！"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="info" class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
<!--GNss新增-->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialogGnss" :close-on-click-modal="false" width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="RULESGNSS" :model="currentRow" label-width="110px">

        <el-form-item label="编号" prop="code">
          <el-input v-model="currentRow.code" placeholder="请输入编号"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="info" class="common_btn-white" @click="isShowDialogGnss = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm('GNSS')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    sensorQuery,
    sensorDelete,
    sensorAdd,
    addGNSS
  } from '@/services/model/sensor'
  import Enums from '@/utils/enums'
  import Format from '@/utils/format'
  // form表单校验规则
  const RULES = {
    count: {
      required: true,
      message: '请输入数量'
    },
    modelId: {
      required: true,
      message: '请选择型号',
    },
    type: {
      required: true,
      message: '请选择类型',
    },

  }
  const RULESGNSS = {
    code: {
      required: true,
      message: '请输入编号',
    }
  }
  export default {
    mixins:[Enums],
    data() {
      return {
        bindStatusList:[
          {
            name:'已使用',
            code:1,
          },
          {
            name:'未使用',
            code:0,
          }
        ],
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        rules: RULES, // 表单校验的规则
        rulesGnss: RULESGNSS,
        tableList: [],
        isShowDialogGnss:false,
        isShowDialog: false, // 是否显示弹窗
        currentRow: {}, // 新增数据
        EnumSensorTypeList: [],
        modelOptions: [],
        files: [],
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑传感器信息' : '新增传感器信息'
      },
      dialogTitleGnss() {
        return this.currentRow.id ? '编辑GNSS信息' : '新增GNSS信息'
      },
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      },
    },
    methods: {
      focusModel() {
        if (!this.currentRow.type) {
          this.$message.info('请先选择传感器类型！')
        }
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 表单提交
      validateForm(name) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if(name=='GNSS'){
              this.submitDataGnss()
            }else {
              this.submitData()
            }

          }
        })
      },
      async submitDataGnss() {
        let res = await addGNSS(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.isShowDialogGnss = false
          this.queryList()
        }
      },
      async submitData() {
        let res = await sensorAdd(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.isShowDialog = false
          this.queryList()
        }
      },
      // 处理删除
      async handleDelete(row) {
        let res = await sensorDelete({
          id: row.id
        })
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '数据已删除'
          })
          this.queryList()
        }
      },
      // 新增数据
      handleAdd() {
        this.currentRow.id = ''
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },

      handleAddGnss() {
        this.currentRow={}
        this.currentRow.id = ''
        this.isShowDialogGnss = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      async queryList() {
        let res = await sensorQuery(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
      },
    },
    mounted() {
      //	传感器类型下拉框
      this.queryDictList(['EnumSensorType'], ['EnumSensorTypeList'])
    },
    activated() {
      this.queryList()
    }
  }
</script>

<style lang="less" scoped>
</style>
